<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="static/css/base.css" />
    <link rel="stylesheet" href="static/css/index.css" />
</head>

<body>

    <div class="layout" id="layout">
        <!-- <div class="layout_header">
            <div class="layout_header_center"></div>
        </div> -->
        <div class="layout_main" id="app" v-cloak>

            <div id="setp_nav_wrap" class="clearfix">
                <div class="setp_nav_wrap_line_one">不干胶标签定制</div>
                <div class="setp_nav_wrap_line_two">Label Customization</div>
                <div class="setp_nav_wrap_line_three">简单四步，即可拥有自己的定制标签......</div>
                <div class="setp_nav_wrap_step_container">
                    <a class="setp_nav_each step_one " href="#step_wrap_one">
                        <div class="step_number">1</div>
                        <div class="step_title">选择加工形式</div>
                    </a>

                    <a class="setp_nav_each step_two " href="#step_wrap_two">
                        <div class="step_number">2</div>
                        <div class="step_title">选择材质</div>
                    </a>

                    <a class="setp_nav_each step_three " href="#step_wrap_three">
                        <div class="step_number">3</div>
                        <div class="step_title">选择成品形态</div>
                    </a>

                    <a class="setp_nav_each step_four" href="#step_wrap_four">
                        <div class="step_number">4</div>
                        <div class="step_title">选择定制数量并提交订单</div>
                    </a>

                </div>
            </div>

            <div class="step_wrap clearfix" id="step_wrap_one">

                <div class="step_title_wrap clearfix">
                    <div class="step_number_text fl">
                        第一步
                    </div>
                    <div class="step_title fl">请根据您的需要选择加工形式（单选）</div>
                </div>


                <div class="check_item_container">
                    <div v-for="category in categoryList" class="check_item_each check_item_large"
                        v-bind:class="{active:category.active}" @click="handerCategoryClick(category)">
                        {{category.category_name}}
                    </div>
                </div>

                <div class="intro_wrap">
                    <div class="intro_left">
                        <img :src="activedCategory.imgUrl">
                    </div>
                    <div class="intro_right" v-html="activedCategory.desc">

                    </div>
                </div>

            </div>
            <div class="step_wrap clearfix" id="step_wrap_two">

                <div class="step_title_wrap clearfix">
                    <div class="step_number_text fl">
                        第二步
                    </div>
                    <div class="step_title fl">请根据您的需要选择材质（单选）</div>
                </div>

                <div class="intro_wrap">
                    <div class="intro_left step_left_container">
                        <img :src="activeTech.imgUrl">
                    </div>
                    <div class="intro_right step_right_container">
                        <div class="check_item_line_container" v-for="(tech,index) in techList" :key="tech.id">
                            <div class="left_title" v-bind:class="{'active':tech.active}">
                                {{tech.name}}
                            </div>
                            <div class="right_item_container">
                                <div v-for="child in tech.children" class="check_item_each"
                                    v-bind:class="{'active':child.active}" @click="handerStepTwoRightItemClick(child)">
                                    {{child.name}}
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="step_wrap clearfix" id="step_wrap_three">

                <div class="step_title_wrap clearfix">
                    <div class="step_number_text fl">
                        第三步
                    </div>
                    <div class="step_title fl">请根据您的需要选择材质（单选）</div>
                </div>

                <div class="check_item_container">
                    <div class="check_item_each check_item_large" v-bind:class="{'active':stepThreeType==1}"
                        @click="handerStepThreeTypeClick(1)">
                        卷筒（卷轴）
                    </div>
                    <div class="check_item_each check_item_large" v-bind:class="{'active':stepThreeType==2}"
                        @click="handerStepThreeTypeClick(2)">
                        平张（单张）
                    </div>
                </div>

                <div class="intro_wrap step_three_form clearfix">


                    <div class="step_left_container">


                        <div class="createPicWrap" id="createPicWrap">

                            <div class="createPicContent">

                                <img src="" id="my_img" alt="">

                            </div>

                        </div>

                        <div style="text-align: center;">
                            <a style="margin:0" @click="CreateCanvasImgAndSetMonitorImg"
                                class="getCanvasImgUrlBtn">生成效果图</a>


                            <a style="margin:0" @click="showOriginImg"
                                class="getCanvasImgUrlBtn">查看原图</a>

                            <iframe id="canvens_iframe" style="display: none;" src="" frameborder="0"></iframe>
                        </div>


                    </div>

                    <div class="intro_right package_from step_right_container">

                        <div class="package_line package_line_two clearfix">
                            <div class="package_line_title">
                                宽度
                            </div>
                            <div class="package_line_right">
                                <input type="text" v-model="e_width" class="package_line_input fl mr_10" />

                            </div>
                            <div class="package_line_title">
                                高度
                            </div>
                            <div class="package_line_right">
                                <input v-model="e_height" type="text" class="package_line_input fl mr_10" />
                            </div>

                        </div>

                        <div class="package_line package_line_two clearfix">
                            <div class="package_line_title">
                                每卷数量
                            </div>
                            <div class="package_line_right">
                                <input type="text" class="package_line_input fl mr_10" />
                            </div>

                        </div>

                        <div class="package_line package_line_two clearfix">
                            <div class="package_line_title">
                                边距
                            </div>
                            <div class="package_line_right">

                                <vue-multiselect v-model="margin_left_item" track-by="name" label="name"
                                    placeholder="==请选择==" :searchable="false" :allow-empty="false"
                                    :options="packageMap[4].children">
                                    <template slot="singleLabel" slot-scope="{ option }">{{ option.name }}</template>
                                </vue-multiselect>


                            </div>
                            <div class="package_line_title">
                                跳距
                            </div>
                            <div class="package_line_right">
                                <vue-multiselect v-model="margin_top_item" track-by="name" label="name"
                                    placeholder="==请选择==" :searchable="false" :allow-empty="false"
                                    :options="packageMap[5].children">
                                    <template slot="singleLabel" slot-scope="{ option }">{{ option.name }}</template>
                                </vue-multiselect>
                            </div>
                        </div>




                        <div v-if="((stepThreeType&item.show_sum)==stepThreeType)&&(item.id!=1&&item.id!=2&&item.id!=3&&item.id!=4&&item.id!=5)"
                            class="package_line clearfix" v-for="(item,index) in packageArr" :key="index">
                            <div class="package_line_title">
                                {{item.name}}
                            </div>

                            <div class="package_line_right">



                                <input type="text" v-if="item.inputStyle==0" class="package_line_input" />

                                <vue-multiselect v-if="item.inputStyle==1&&item.id!=10" v-model="value_01"
                                    track-by="name" label="name" placeholder="==请选择==" :searchable="false"
                                    :allow-empty="false" :options="item.children">
                                    <template slot="singleLabel" slot-scope="{ option }">{{ option.name }}</template>
                                </vue-multiselect>



                                <div v-if="item.inputStyle==2" v-for="(child,index) in item.children" :key="index"
                                    class="check_item_each"
                                    v-bind:class="{'active':child.active,'short':(parseFloat(child.name)||-99)!=-99}"
                                    @click="handerStepThreeRightItemClick(child)"> {{child.name}}</div>

                                <div v-if="item.inputStyle==3" style="padding:10px;">

                                    <img class="fl" style="width:116px;height: 116px;"
                                        :src="packageMap[9].actived_child_item.imgUrl" alt="">

                                    <vue-multiselect style="margin-top: 76px; margin-left:10px; width:250px;" class="fl"
                                        v-model="packageMap[9].actived_child_item" track-by="name" label="name"
                                        @change="setDirectActive" placeholder="==请选择==" :searchable="false"
                                        :allow-empty="false" :options="packageMap[9].children">
                                        <template slot="singleLabel"
                                            slot-scope="{ option }">{{ option.name }}</template>
                                    </vue-multiselect>


                                </div>




                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="step_wrap clearfix" id="step_wrap_form">

                <div class="step_title_wrap clearfix">
                    <div class="step_number_text fl">
                        第四步
                    </div>
                    <div class="step_title fl">选择定制数量并提交订单</div>
                </div>



                <div class="intro_wrap step_three_form clearfix">


                    <div class="step_left_container">


                        <div class="createPicWrap" id="createPicWrap">

                            <div class="createPicContent">

                                <div class="step_four_show_detail_container">


                                    <div class="show_detail_line" style="background-color: #ededed;font-weight: bold;">
                                        您选择的信息
                                    </div>

                                    <div class="show_detail_line">
                                        <div class="show_detail_line_title">材质</div>
                                        <div class="show_detail_line_content">优质热敏纸</div>
                                        <div class="show_detail_line_title">加工</div>
                                        <div class="show_detail_line_content">标签印刷(多色)</div>
                                    </div>

                                    <div class="show_detail_line">
                                        <div class="show_detail_line_title">成品</div>
                                        <div class="show_detail_line_content">属性</div>
                                        <div class="show_detail_line_title"></div>
                                        <div class="show_detail_line_content"></div>
                                    </div>

                                    <div class="show_detail_line">
                                        <div class="show_detail_line_title">行间距</div>
                                        <div class="show_detail_line_content">1列</div>
                                        <div class="show_detail_line_title">列间距</div>
                                        <div class="show_detail_line_content">2mm</div>
                                    </div>
                                    <div class="show_detail_line">
                                        <div class="show_detail_line_title">周芯内径</div>
                                        <div class="show_detail_line_content">3mm</div>
                                        <div class="show_detail_line_title">数量</div>
                                        <div class="show_detail_line_content">100</div>
                                    </div>

                                    <div class="show_detail_line">
                                        <div class="show_detail_line_title">模版</div>
                                        <div class="show_detail_line_content"></div>
                                        <div class="show_detail_line_title"></div>
                                        <div class="show_detail_line_content"></div>
                                    </div>



                                </div>


                            </div>

                        </div>

                    </div>

                    <div class="step_right_container">

                        <div class="line clearfix">
                            <div class="left_title">定制数量</div>
                            <div class="left_content">
                                <input type="text" placeholder="" class="package_line_input fl mr_10" />
                            </div>
                        </div>

                        <div class="line clearfix">
                            <div class="left_title">选择模板</div>
                            <div class="left_content">
                                <input type="text" class="package_line_input fl mr_10" />
                            </div>
                        </div>

                        <div class="line clearfix">
                            <div class="left_title">附加要求</div>
                            <div class="left_content">
                                <textarea placeholder="如果您对此定制订单有附加要求，请在此填写" rows="5"
                                    class="my_textarea fl mr_10"></textarea>
                            </div>
                        </div>

                        <div class="line clearfix">
                            <div class="left_title"> 预计交货期</div>
                            <div class="left_content">
                                2019-10-11日
                            </div>
                        </div>


                        <div class="line clearfix">
                            <div class="left_title"> 最终价络</div>
                            <div class="left_content">

                                <a href="###" class="calcPriceBtn">计算价格</a>
                            </div>
                        </div>

                        <div class="line clearfix">
                            <div class="left_title"> 总价</div>
                            <div class="left_content">
                                0 RMB
                            </div>
                        </div>

                        <div class="line clearfix">
                            <div class="left_title"> 单价</div>
                            <div class="left_content">
                                0 RMB
                            </div>
                        </div>

                    </div>
                </div>

                <div class="submit_btn_wrap clearfix">
                    <div class="sumbit_btn fl">以上信息确认无误，立即提交</div>
                    <div class="question_btn fr">还有疑问，马上联系客服</div>
                </div>

            </div>
        </div>

    </div>


    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="static/plugins/layer/layer.js"></script>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->


    <script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
    <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">

    <script src="static/js/data.js"></script>
    <script src="static/js/index.js"></script>



</body>

</html>